<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
<title>函数传参，改变Div任意属性的值</title>
<style>
body,p{	margin:0;padding:0;}
body{
	color:#333;font:12px/1.5 Tahoma;padding-top:10px;
}
#outer{
	width:300px;margin:0 auto;
}
p{margin-bottom:10px;}
button{margin-right:5px;}
label{width:5em;display:inline-block;text-align:right;}
input{padding:3px;font-family:inherit;border:1px solid #ccc;}
#div1{
	color:#fff;width:180px;
	height:180px;background:#000;
	margin:0 auto;padding:10px;
	border : 10px solid #ff4400;
}
</style>
<script>
	onload = function(){
		var okbtn = document.getElementById("ok");
		var box = document.getElementById("div1");
		okbtn.onclick = function(){
			var prop01 = document.getElementById("propname").value;
			var prop02 = document.getElementById("propval").value;
			
			box.style[prop01] = prop02;
		}
	}
</script>
</head>
<body>
<div id="outer">
    <p><label>属性名：</label><input id="propname" type="text" value="background"></p>
    <p><label>属性值：</label><input id="propval" type="text" value="blue"></p>
    <p><label></label><button id="ok">确定</button><button>重置</button></p>
</div>
<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
</body></html>